<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="指标名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
          <a-input placeholder="请输入指标名称" v-model.trim="addForm.name" :max-length="100" />
        </a-form-model-item>
        <a-form-model-item label="指标编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
          <a-input placeholder="请输入指标编码" v-model.trim="addForm.code" :max-length="40" />
        </a-form-model-item>
        <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description">
          <a-input placeholder="请输入描述" v-model.trim="addForm.description" :max-length="255" />
        </a-form-model-item>
        <a-form-model-item label="所属类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
          <a-tree-select
            v-model="addForm.categoryId"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '220px', overflow: 'auto' }"
            :tree-data="treeData"
            placeholder="请选择所属类别"
            :replaceFields="replaceFields"
            tree-node-filter-prop="categoryName"
            :default-expanded-keys="addForm.categoryId"
            :default-selected-keys="addForm.categoryId" />
        </a-form-model-item>
        <a-form-model-item label="收支类型" prop="inOrOut" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-select placeholder="请选择收支类型" @select="onSelect" v-model="addForm.inOrOut">
            <a-select-option :value="item.id" v-for="(item, index) in TypeList" :key="index">{{ item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="值类型" prop="valueType" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-select placeholder="请选择值类型" v-model="addForm.valueType">
            <a-select-option :value="item.id" v-for="(item, index) in valueTypeList" :key="index">{{ item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="贡献度占比" prop="proportion" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input-number
            v-model:value="addForm.proportion"
            :min="0"
            :max="100"
            :precision="0"
            :formatter="transformNum"
            :parser="transformNum"
            :max-length="3"
            style="width: 100%;"/>

        </a-form-model-item>

      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>

import { getCateIndicator, addIndicators, editIndicators } from '@/api/budget'
export default {
    components: {},
    data () {
        return {
            addRules: {
                name: [
                    { required: true, message: '请输入指标名称!', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入指标编码!', trigger: 'blur' }
                ],
                inOrOut: [
                    { required: true, message: '请选择收支类型!', trigger: 'change' }
                ],
                valueType: [
                    { required: true, message: '请选择值类型!', trigger: 'change' }
                ],
                categoryId: [
                    { required: true, message: '请选择所属类别!', trigger: 'change' }
                ]
            },
            replaceFields: { children: 'children', label: 'categoryName', value: 'categoryId', key: 'categoryId' },
            addForm: {
                name: '',
                code: '',
                description: '',
                categoryId: undefined,
                inOrOut: 1,
                valueType: 1,
                proportion: 0
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            TypeList: [{ id: 1, name: '收入' }, { id: 2, name: '支出' }, { id: 3, name: '其它' }],
            valueTypeList: [{ id: 1, name: '金额' },
            { id: 2, name: '数值' },
            { id: 3, name: '百分比' },
            { id: 4, name: '计数' }],

            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: '',
            treeData: [],
            treeLoadData: true
        }
    },
    mounted () {

    },
    methods: {
        transformNum (value) {
            let v = null
            switch (typeof value) {
                case 'string':
                    v = isNaN(+value) ? 0 : value.replace(/\./g, '')
                    break
                case 'number':
                    v = isNaN(value) ? 0 : String(value).replace(/\./g, '')
                    break
                default:
                    v = 0
            }
            return v
        },
        // 收支类型
        onSelect (e) {
            console.log(e)
            this.addForm.inOrOut = e
        },

        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            this.rowData = ''
            this.addForm = {
                name: '',
                code: '',
                description: '',
                categoryId: undefined,
                inOrOut: 1,
                valueType: 1,
                proportion: 0,
                indicatorId: ''
            }
            getCateIndicator().then(res => {
                this.treeLoadData = false
                if (res.code == 200) {
                    this.treeData = res.data
                }
            })
            return this
        },
        // 获取行数据和id
        setData (row) {
            console.log(row)
            if (this.mode == 'edit') {
                this.addForm = row
            }
            this.rowData = row
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            // this.addForm.resetFields()
            this.rowData = ''
            this.addForm = {
                name: '',
                code: '',
                description: '',
                categoryId: undefined,
                inOrOut: 1,
                valueType: 1,
                proportion: 0,
                indicatorId: ''
            }
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                console.log(this.addForm)
                if (valid) {
                    const { name, code, description,
                        categoryId, inOrOut, valueType, proportion, indicatorId } = this.addForm
                    const par = {
                        name,
                        code,
                        description,
                        categoryId: categoryId == undefined ? 0 : Number(categoryId),
                        inOrOut,
                        valueType,
                        proportion,
                        indicatorId
                    }
                    const Api = this.mode == 'add' ? addIndicators : editIndicators
                    Api(par).then(res => {
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
